<template>
    <div>
        <el-form ref="form" label-width="80px">
            <el-form-item label="SPU名称"> {{ spu.spuName }} </el-form-item>
            <el-form-item label="SKU名称">
                <el-input
                    placeholder="SKU名称"
                    v-model="skuInfo.skuName"
                ></el-input>
            </el-form-item>
            <el-form-item label="价格(元)">
                <el-input
                    placeholder="价格(元)"
                    type="number"
                    v-model="skuInfo.price"
                ></el-input>
            </el-form-item>
            <el-form-item label="重量(千克)">
                <el-input
                    placeholder="重量(千克)"
                    v-model="skuInfo.weight"
                ></el-input>
            </el-form-item>
            <el-form-item label="规格描述">
                <el-input
                    type="textarea"
                    placeholder="规格描述"
                    rows="4"
                    v-model="skuInfo.skuDesc"
                ></el-input>
            </el-form-item>
            <el-form-item label="平台属性">
                <el-form :inline="true" ref="form" label-width="80px">
                    <el-form-item
                        :label="attr.attrName"
                        v-for="(attr, index) in attrInfoList"
                        :key="index"
                    >
                        <el-select
                            placeholder="请选择"
                            v-model="attr.attrIdAndValueId"
                        >
                            <el-option
                                :label="value.valueName"
                                :value="`${attr.id}:${value.id}`"
                                v-for="(value, index) in attr.attrValueList"
                                :key="value.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-form-item>
            <el-form-item label="销售属性">
                <el-form :inline="true" ref="form" label-width="80px">
                    <el-form-item
                        :label="saleAttr.saleAttrName"
                        v-for="(saleAttr, index) in saleAttrList"
                        :key="saleAttr.id"
                    >
                        <el-select
                            placeholder="请选择"
                            v-model="saleAttr.attrIdAndValueId"
                        >
                            <el-option
                                :label="value.saleAttrValueName"
                                :value="`${saleAttr.id}:${value.id}`"
                                v-for="(
                                    value, index
                                ) in saleAttr.spuSaleAttrValueList"
                                :key="value.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-form-item>
            <el-form-item label="图片列表">
                <el-table
                    style="width: 100%"
                    border
                    :data="spuImageList"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="80">
                    </el-table-column>
                    <el-table-column prop="prop" label="图片" width="width">
                        <template #default="{ row, $index }">
                            <img
                                :src="row.imgUrl"
                                style="width: 100px; height: 100px"
                            />
                        </template>
                    </el-table-column>
                    <el-table-column prop="imgName" label="名称" width="width">
                    </el-table-column>
                    <el-table-column prop="prop" label="操作" width="width">
                        <template #default="{ row, $index }">
                            <el-button
                                type="primary"
                                size="mini"
                                v-if="row.isDefault == 0"
                                @click="changeDefault(row)"
                                >设置默认</el-button
                            >
                            <el-button size="mini" v-else>默认</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="saveSkuInfo">保存</el-button>
                <el-button @click="cancel">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: "SkuForm",
    data() {
        return {
            // 图片的信息
            spuImageList: [],
            // 销售属性
            saleAttrList: [],
            // 平台属性的数据
            attrInfoList: [],
            // 收集sku数据
            skuInfo: {
                // 第一类收集的数据：父组件给的数据
                category3Id: 0,
                spuId: 0,
                tmId: 0,
                // 第二类：需要通过v-model收集
                skuName: "",
                price: 0,
                weight: "",
                skuDesc: "",
                // 第三类：需要自己书写代码收集
                // 收集图片的属性
                skuImageList: [
                    /* {
                        id: 0,
                        imgName: "string",
                        imgUrl: "string",
                        isDefault: "string",
                        skuId: 0,
                        spuImgId: 0,
                    }, */
                ],
                // 默认图片
                skuDefaultImg: "",
                // 平台属性
                skuAttrValueList: [
                    {
                        attrId: 0,
                        valueId: 0,
                    },
                ],
                // 销售属性
                skuSaleAttrValueList: [
                    /* {
                        id: 0,
                        saleAttrId: 0,
                        saleAttrName: "string",
                        saleAttrValueId: 0,
                        saleAttrValueName: "string",
                        skuId: 0,
                        spuId: 0,
                    }, */
                ],
            },
            spu: {},
            // 收集图片的数据字段,缺少isDefault属性，提交给服务器时需要整理参数
            imageList: [],
        }
    },
    methods: {
        // 获取SkuForm数据
        async getData(spu, category1Id, category2Id) {
            // 收集父组件给予的数据
            this.skuInfo.category3Id = spu.category3Id
            this.skuInfo.spuId = spu.id
            this.skuInfo.tmId = spu.tmId
            this.spu = spu

            this.spuName = spu.spuName
            // 获取图片列表数据
            const imgListResult = await this.$API.sku.reqGetSpuImageList(spu.id)
            if (imgListResult.code == 200) {
                const imaList = imgListResult.data
                imaList.forEach((item) => {
                    item.isDefault = 0
                })
                this.spuImageList = imaList
            }
            // 获取销售属性数据
            const saleAttrListResult =
                await this.$API.sku.reqGetSpuSaleAttrList(spu.id)
            if (saleAttrListResult.code == 200) {
                this.saleAttrList = saleAttrListResult.data
            }
            // 平台属性的数据
            const attrInfoListResult = await this.$API.sku.reqGetAttrInfoList(
                category1Id,
                category2Id,
                spu.category3Id
            )
            if ((attrInfoListResult.code = 200)) {
                this.attrInfoList = attrInfoListResult.data
            }
        },
        // 是table表格复选框按钮的事件
        handleSelectionChange(params) {
            // params 获取用户选中的图片信息，但是缺少isDefault字段
            this.imageList = params
        },
        // 设置默认按钮 排他操作
        changeDefault(row) {
            // 点击的图片列表数据的按钮值设置为 1 其他设置为0
            this.spuImageList.forEach((item) => {
                item.isDefault = 0
            })
            // 点击的那个图片的数据变为1
            row.isDefault = 1
            // 收集默认图片的地址
            this.skuInfo.skuDefaultImg = row.imgUrl
        },
        // 取消按钮的自定义事件
        cancel() {
            // 触发自定义事件切换场景
            this.$emit("changeScene", { scene: 0, flag: "修改" })
            // 清除数据
            Object.assign(this._data, this.$options.data())
        },
        // 保存sku信息
        async saveSkuInfo() {
            // 整理参数
            // 整理平台属性
            /* 
            const { attrInfoList, skuInfo, saleAttrList, spuImageList } = this
            // 整理平台属性方式1
            // 新建数组
             const arr = []
            // 把收集到的数据进行整理
            attrInfoList.forEach((item) => {
                // 代表当前平台属性用户进行了选择
                if (item.attrIdAndValueId) {
                    // 分隔开需要的参数并解构赋值
                    const [attrId, valueId] = item.attrIdAndValueId.split(":")
                    const attrObj = {
                        attrId,
                        valueId,
                    }
                    arr.push(attrObj)
                }
            })
            // 将赋值好的参数赋值给skuInfo.skuAttrValueList
            skuInfo.skuAttrValueList = arr */
            const { attrInfoList, skuInfo, saleAttrList, spuImageList } = this
            // 整理平台属性操作
            skuInfo.skuAttrValueList = attrInfoList.reduce((pre, cur) => {
                if (cur.attrIdAndValueId) {
                    const [attrId, valueId] = cur.attrIdAndValueId.split(":")
                    pre.push({ attrId, valueId })
                }
                return pre
            }, [])
            // 整理平台销售属性的操作
            skuInfo.skuSaleAttrValueList = saleAttrList.reduce((pre, cur) => {
                // 判断是否带有参数
                if (cur.attrIdAndValueId) {
                    // 拿到分割之后的参数,并且解构拿值
                    const [saleAttrId, saleAttrValueId] =
                        cur.attrIdAndValueId.split(":")
                    pre.push({ saleAttrId, saleAttrValueId })
                }
                return pre
            }, [])
            // 整理图片的数据
            skuInfo.skuImageList = spuImageList.map((item) => {
                return {
                    imgName: item.imgName,
                    imgUrl: item.imgUrl,
                    isDefault: item.isDefault,
                    spuImgId: item.id,
                }
            })
            
            // 带参发送请求
            const result = await this.$API.spu.reqSaveSkuInfo(skuInfo)
            if (result.code == 200) {
                this.$message({ type: "success", message: "添加SKU成功" })
                // 触发自定义事件切换场景
                this.$emit("changeScene", { scene: 0, flag: "修改" })
            }
        },
    },
}
</script>

<style scoped>
</style>